<template>
  <!-- <div class="box" v-on:click="myclick(22132)">111</div>
  <br>
  <div class="box" v-on:click="myclick($event)">2212 </div>
  <br> -->
  <!-- .stop 阻止冒泡 ..prevent阻止默认事件 a form .once只触发一次 -->
  <div class="box" @click="myclick2($event,'div')">
    <span @click.stop="myclick2($event,'span')">我是span</span> <br>
    <a href="http://www.baidu.com" @click.prevent="myclick2($event,'aaaa')" >我是百度</a><br>
    <a href="JavaScript:void(0)" @click="myclick2($event,'bbb')" >我是百度</a><br>
  </div>

  <form @submit.prevent action="http://www.baidu.com" method="get">
    <input type="submit" value="提价">
  </form> <br>

  <span @click.once="myclick2($event,'span')">我是span</span> <br>

  <!-- .self 点检事件,只能点击自己的时候触发,子类冒泡上来的不触发 -->
  <div class="box" @click.self="myclick2($event,'div')">
    <span @click="myclick2($event,'span')">我是span</span> <br>
    <span @click="myclick2($event,'span')">我是span</span> <br>
    <span @click="myclick2($event,'span')">我是span</span> <br>
    <span @click="myclick2($event,'span')">我是span</span> <br>
    <span @click="myclick2($event,'span')">我是span</span> <br>
    <span @click="myclick2($event,'span')">我是span</span> <br>
    <span @click="myclick2($event,'span')">我是span</span> <br>
  </div>
<!-- 按键的修饰符 -->
  <input @keyup.enter="myclick2($event,'keyup')" />

  <div class="box" @click.ctrl="myclick2($event,'ctrl')">Do something</div>
</template>

<script setup lang="ts">
// 如何获取dom 元素
let myclick = (e) => {
  console.log(e);
  // console.log(e.target.style.fontSize = "40px");
}

let myclick2 = (e,ss:string) => {
  // 阻止冒泡
  // e.stopPropagation();
  // 阻止默认事件
  // e.preventDefault();
  
  console.log(ss);
  // console.log(e.target.style.fontSize = "40px");
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
}
</style>
